.c-btn {
  --btn-height: 80px;
  --btn-line-height: 80px;
  --btn-radius: 10px;
  --btn-padding: 0 50px;
  --btn-size: 36px;
  --btn-background: var(--color-caption);
  --btn-color: var(--color-default);
  box-sizing: border-box;
  text-align: center;
  vertical-align: baseline;
  height: var(--btn-height);
  line-height: var(--btn-line-height);
  border-radius: var(--btn-radius);
  background-color: var(--btn-background);
  color: var(--btn-color);
  padding: var(--btn-padding);
  font-size: var(--btn-size);
  font-weight: 500;
  flex-grow: 1;
  &.button-hover {
    opacity: 0.7;
  }


  &[size='mini'] {
    display: inline-block;
    vertical-align: baseline;
    font-weight: normal;
    --btn-height: 54px;
    --btn-line-height: 54px;
    --btn-size: 24px;
    --btn-padding: 0 24px;
    --btn-radius: 6px;
    height: var(--btn-height);
    font-size: var(--btn-size);
    line-height: var(--btn-line-height);
    border-radius: var(--btn-radius);
    padding: var(--btn-padding);
    flex-grow: 0;
    margin: 0;
  }
  &.round {
    --btn-radius: 40px;
  }

  &[size='inline'] {
    display: inline-block;
    --btn-height: 72px;
    --btn-line-height: 72px;
    --btn-size: 28px;
    --btn-padding: 0 30px;
    margin: 0;
    height: var(--btn-height);
    font-size: var(--btn-size);
    line-height: var(--btn-line-height);
    border-radius: var(--btn-radius);
    padding: var(--btn-padding);
    flex-grow: 0;
  }

  & + & {
    margin-top: 30px;
  }
  & + &[size='inline'],
  & + &[size='mini'] {
    margin-top: 0px;
    font-weight: normal;
    margin-left: 30px;
    flex-grow: 0;
  }
  @each $color in ('primary', 'info', 'success', 'warn', 'danger') {
    &[type='#{$color}'] {
      --btn-background: var(--color-#{$color});
      --btn-color: #fff;
      background-color: var(--btn-background);
      color: var(--btn-color);
    }
  }
  &[loading],
  &[disabled] {
    opacity: 0.7;
    background-color: var(--btn-background) !important;
    color: var(--btn-color) !important;
  }
  &[plain] {
    background-color: var(--btn-color) !important;
    color: var(--btn-background) !important;
    border-color:var(--btn-background) inset !important;
  }
}

.link-btn {
  display: inline-block;
  padding: 10px 15px;
  font-size: 26px;
  margin-right: 20px;
  color: var(--color-primary);
  &:last-of-type {
    margin-right: 0px;
  }
  @each $color in ('primary', 'info', 'success', 'warn', 'danger') {
    &.#{$color} {
      color: var(--color-danger);
    }
  }
}
